﻿
@{
    ViewData["Title"] = "Grid";
}

<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Gallery Grid</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Gallery</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Gallery Grid</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <!-- [ Gallery-Grid ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Image Grid</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <a href="~/assets/images/gallery-grid/img-grd-gal-1.jpg" data-lightbox="1" data-title="My caption 1">
                                                            <img src="~/assets/images/gallery-grid/img-grd-gal-1.jpg" alt="" class="img-fluid img-thumbnail">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <a href="~/assets/images/gallery-grid/img-grd-gal-2.jpg" data-lightbox="2" data-title="My caption 2">
                                                            <img src="~/assets/images/gallery-grid/img-grd-gal-2.jpg" alt="" class="img-fluid img-thumbnail">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <a href="~/assets/images/gallery-grid/img-grd-gal-3.jpg" data-lightbox="3" data-title="My caption 3">
                                                            <img src="~/assets/images/gallery-grid/img-grd-gal-3.jpg" alt="" class="img-fluid img-thumbnail">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <a href="~/assets/images/gallery-grid/img-grd-gal-4.jpg" data-lightbox="4" data-title="My caption 4">
                                                            <img src="~/assets/images/gallery-grid/img-grd-gal-4.jpg" alt="" class="img-fluid img-thumbnail">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <a href="~/assets/images/gallery-grid/img-grd-gal-5.jpg" data-lightbox="5" data-title="My caption 5">
                                                            <img src="~/assets/images/gallery-grid/img-grd-gal-5.jpg" alt="" class="img-fluid img-thumbnail">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <a href="~/assets/images/gallery-grid/img-grd-gal-6.jpg" data-lightbox="6" data-title="My caption 6">
                                                            <img src="~/assets/images/gallery-grid/img-grd-gal-6.jpg" alt="" class="img-fluid img-thumbnail">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Video Grid</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <div class="embed-responsive embed-responsive-4by3">
                                                            <iframe allowfullscreen="" src="//player.vimeo.com/video/246066429?title=0&amp;byline=0&amp;portrait=0"></iframe>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <div class="embed-responsive embed-responsive-4by3">
                                                            <iframe allowfullscreen="" src="//player.vimeo.com/video/246066429?title=0&amp;byline=0&amp;portrait=0"></iframe>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <div class="embed-responsive embed-responsive-4by3">
                                                            <iframe allowfullscreen="" src="//player.vimeo.com/video/246066429?title=0&amp;byline=0&amp;portrait=0"></iframe>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <div class="embed-responsive embed-responsive-4by3">
                                                            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/IkyZHPnfFnE"></iframe>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <div class="embed-responsive embed-responsive-4by3">
                                                            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/IkyZHPnfFnE"></iframe>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6">
                                                <div class="thumbnail mb-4">
                                                    <div class="thumb">
                                                        <div class="embed-responsive embed-responsive-4by3">
                                                            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/IkyZHPnfFnE"></iframe>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Gallery-Grid ] end -->
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->

@section Styles{
    <!--lightbox css -->
    <link rel="stylesheet" href="~/assets/plugins/lightbox2-master/css/lightbox.min.css">
}

@section Scripts{
    <!--lightbox Js -->
    <script src="~/assets/plugins/lightbox2-master/js/lightbox.min.js"></script>
    <script>
        lightbox.option({
            'resizeDuration': 200,
            'wrapAround': true
        })
    </script>
}

